<template>
  <div class="editPassword">
    <div class="m-conbox">
      <p><label>名称:</label>晨晨</p>
      <p><label>手机号:</label>12312312312</p>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForms" label-width="100px" class="demo-ruleForm">
        <el-form-item label="设置密码" prop="orignPassword">
          <el-input type="password" size="mini" maxlength="18" v-model="ruleForm.orignPassword" autocomplete="off">
          </el-input><i v-if="isBoth" class="el-icon-success" style="color:green;"></i>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" maxlength="18" size="mini" :disabled="ableRepassword"
            v-model="ruleForm.confirmPassword" autocomplete="off">
          </el-input><i v-if="isSame&&isBoth" class="el-icon-success" style="color:green;"></i><i v-if="!isSame&&isBoth"
            class="el-icon-error" style="color:red;"></i>
        </el-form-item>
      </el-form>
    </div>
    <div class="f-btnbox">
      <el-button size="mini">取消</el-button>
      <el-button size="mini" type="primary" @click="submitNewPass">确定</el-button>
    </div>
    <el-dialog v-model="isShow" width="30%" :before-close="close">
      <template #title>
        <div class="f-dialog-title"><img src="../../assets/imgs/icon_sigh.png" /> 提示</div>
      </template>
      <span>确认保存设置的密码？请牢记您的密码!</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShow = false" size="small">取 消</el-button>
          <el-button type="primary" @click="surePassword" size="small">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, toRefs, reactive } from "vue";
import { ElMessage } from "element-plus";
import { editPassword } from "@/api/logins";
export default {
  name: "editPassword",
  compnents: {},
  setup(props, ctx) {
    const ruleForms = ref(null);
    const validatePass = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        state.isSame = false;
        state.isBoth = false;
        state.ableRepassword = true;
        callback(new Error("请输入密码"));
      } else {
        var zg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![_~@#$^]+$)[a-zA-Z\d_~@#$^]+$/;
        if (value.length < 6 || value.length > 18) {
          state.isBoth = false;
          state.isSame = false;
          state.ableRepassword = true;
          callback(new Error("请输入6-18位密码"));
        } else if (!zg.test(value)) {
          state.isBoth = false;
          state.isSame = false;
          state.ableRepassword = true;
          callback(
            new Error(
              "请输入6-18位大小写字母、数字、符号（_~@#$^）至少含有2种密码"
            )
          );
        } else {
          state.ableRepassword = false;
          if (state.ruleForm.confirmPassword == "") {
            state.isBoth = false;
            state.isSame = false;
          } else {
            if (
              state.ruleForm.confirmPassword === state.ruleForm.orignPassword
            ) {
              state.isBoth = true;
              state.isSame = true;
              ruleForms.value.clearValidate();
            } else {
              state.isBoth = true;
              state.isSame = false;
            }
          }
        }
      }
    };
    const validatePass2 = (rule, value, callback) => {
      console.log(value);
      console.log(state.ruleForm.orignPassword);
      if (value === "") {
        state.isBoth = false;
        state.isSame = false;
        callback(new Error("请输入密码"));
      } else if (value !== state.ruleForm.orignPassword) {
        state.isBoth = true;
        state.isSame = false;
        callback(new Error("两次输入密码不一致!"));
      } else {
        state.isBoth = true;
        state.isSame = true;
        callback();
      }
    };
    let state = reactive({
      ruleForm: {
        orignPassword: "",
        confirmPassword: "",
      },
      isSame: false, //  两个密码是否相同
      isBoth: false, //  两个密码是否都符合要求
      isShow: false,
      ableRepassword: true,
      rules: {
        orignPassword: [{ validator: validatePass, trigger: "blur" }],
        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
      },
    });

    function submitNewPass() {
      if (
        state.ruleForm.orignPassword == "" ||
        state.ruleForm.confirmPassword == ""
      ) {
        return ElMessage.error("请输入密码!");
      }
      if (state.ruleForm.orignPassword !== state.ruleForm.confirmPassword) {
        return ElMessage.error("两次输入密码不一致!");
      } else {
        state.isShow = true;
      }
    }
    function surePassword() {
      editPassword({ password: state.ruleForm.orignPassword }).then(
        (response) => {
          console.log(response);
          state.isShow = false;
        }
      );
    }
    return {
      ...toRefs(state),
      ruleForms,
      submitNewPass,
      surePassword,
    };
  },
};
</script>
<style lang="less" scoped>
.editPassword {
  .m-conbox {
    label {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 10px;
    }
    p {
      margin-bottom: 20px;
    }
    /deep/ .el-input {
      width: 200px;
    }
    /deep/ .el-form-item {
      margin-bottom: 10px;
    }
  }
  .f-btnbox {
    box-sizing: border-box;
    padding-left: 50px;
    margin-top: 20px;
    /deep/ .el-button + .el-button {
      margin-left: 20px;
    }
  }
  .el-dialog {
    border-radius: 12px;
  }
  .el-dialog__header {
    padding: 20px 0 10px;
    margin: 0 20px;
    border-bottom: 1px solid #e2e2e2;
  }
  .f-dialog-title {
    line-height: 26px;
  }
  .f-dialog-title img {
    display: block;
    float: left;
    margin-right: 12px;
  }
}
</style>
